<template>
  <a-form :form="form">
    <a-row>
      <a-col :span="6">
        <a-tree
          :replaceFields="{children:'children', title:'label', key:'id' }"
          :selected-keys="selectedKeys"
          :tree-data="treeData"
          @select="onSelect"
          :expanded-keys="expandedKeys"
          :auto-expand-parent="autoExpandParent"
          @expand="onExpand"
        />
      </a-col>
      <a-col :span="18">
        <div v-if="selectUser">
          <a-form-item v-if="formOptions[0].isReport" :colon="false" label=" " :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-alert message="已上报" type="info" />
          </a-form-item>
          <a-form-item v-for="item in formOptions" :label="item.fieldName" :key="item.id" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input :disabled="item.fieldDefaultSet === '2'" v-decorator="[`${item.fieldCode}`,{initialValue:`${item.fieldDefault}`}]" @blur="computeSalary" :placeholder="`请输入${item.fieldName}`"></a-input>
          </a-form-item>
        </div>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { postAction } from '../../../api/manage'
  export default {
    name: 'SalaryInputForm',
    components: {},
    props: { reportId: { type: String } },
    data () {
      return {
        form: this.$form.createForm(this),
        model: {},
        expandedKeys: [],
        autoExpandParent: true,
        selectedKeys: [],
        selectUser: '',
        treeData: [],
        formOptions: [],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        url: {
          add: '/salary/salaryReport/add',
          edit: '/salary/salaryReport/edit',
          queryById: '/salary/salaryReport/queryById'
        }
      }
    },
    computed: { },
    created () {
      // 如果是流程中表单，则需要加载流程表单data
      console.log('this', this.reportId)
      this.getUserTree()
      this.getInputForm()
    },
    methods: {
      getUserTree() {
        getAction('/sys/sysDepart/queryUserDepartList').then((res) => {
          // console.log('xxxxxxxxxxxxxxxx', res)
          if (res.code === 200) {
            this.treeData = res.result.depart
            this.expandedKeys = [res.result.depart[0].id]
          }
        })
      },
      onExpand(expandedKeys) {
      console.log('onExpand', expandedKeys)
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
      onSelect(selectedKeys, info) {
        console.log('onSelect', selectedKeys, info)
        if (selectedKeys.length === 0) {
          return false
        }
        this.selectedKeys = selectedKeys
        if (info.selectedNodes[0].data.props.type === 'user') {
          this.selectUser = info.selectedNodes[0].data.props.id
          this.getInputForm()
        }
      },
      getInputForm() {
        getAction(`/salary/salarySub/getByUserAndReport?reportId=${this.reportId}&userId=${this.selectUser}`).then((res) => {
          console.log('res', res)
          if (res.code === 200) {
            this.form.resetFields()
            this.formOptions = res.result
          }
        })
      },
      computeSalary(e) {
        console.log(e.target.value)
        // eslint-disable-next-line handle-callback-err
        this.form.validateFields((err, values) => {
          console.log('values', values)
          postAction('/salary/salarySub/getCalculation', { ...values }).then((res) => {
            console.log('thisres', res)
            if (res.code === 200) {
              this.form.resetFields()
            this.formOptions = res.result
          }
          })
        })
      },
      submitForm () {
        const that = this
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true
            let httpurl = '/salary/salarySub/addOrUpdate'
            let method = 'post'
            let formData = Object.assign(this.model, values, { reportId: this.reportId, userId: this.selectUser })
            console.log('表单提交数据', formData)
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                // that.$emit('ok')
                this.getInputForm()
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
            })
          }
        })
      }
    }
  }
</script>
